<template>
    <div class="future-weather">
      <div>
        <p>
          <span class="color_red">{{location.name}}</span>
          实时天气
        </p>
        <p>
          最后更新时间：{{ updateTime }}
        </p>
      </div>
      <div class="now">
        <p>天气状况:{{ now.text }}
          <i :class="iconName" ></i>
        </p>
        <p>云量:{{ now.cloud }}%</p>
        <p>露点温度:{{ now.dew }}</p>
        <p>能见度:{{ now.vis }}公里</p>
        <p>体感温度:{{ now.feelsLike}}摄氏度</p>
        <P>相对湿度:{{ now.humidity }}%</P>
        <p>温度:{{ now.temp }}摄氏度</p>
        <p>风向360角度:{{ now.wind360 }}</p>
        <p>风向:{{ now.windDir }}</p>
        <p>风力等级:{{ now.windScale }}级</p>
        <p>风速:{{ now.windSpeed }}公里/小时</p>
      </div>
    </div>
  </template>
  
  <script>
  
  import axios from "axios";
  import * as echarts from "echarts/core";
  import { GridComponent } from "echarts/components";
  import { LineChart } from "echarts/charts";
  import { UniversalTransition } from "echarts/features";
  import { CanvasRenderer } from "echarts/renderers";
  import dayjs from 'dayjs' ;
  import "qweather-icons/font/qweather-icons.css"
  

  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
  import { KEY,API_NOW } from "../common/constrant";
  import { mapState } from 'vuex';
  export default {
    data(){
      return{
        now: {},
        // updateTime:""
      }
    },
    computed:{
      ...mapState([
        "location"
      ]),
      updateTime:function(){
        return dayjs(this.now.obsTime).format("YYYY-MM-DD HH:mm:ss")
      },
      iconName:function(){
        return "qi-" + this.now.icon
      }
    },
    created() {
      this.getData();
    },
    methods: {
      //获取API数据
      getData() {
        axios
          .get(API_NOW, {
            params: {
              // location: "101270101",
              location:this.location.id,
              key: KEY,
            },
          })
          .then((res) => {
            console.log(res.data);
            this.now= res.data.now;
            this.updateTime = dayjs(res.data.updateTime).format(
              "YYYY-MM-DD HH:mm:ss"
              );
          });
      },
    },
    mounted(){
      document.querySelector("body").setAttribute('style','background:linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%)')
    },
    beforeDestroy(){
      document.querySelector('body').removeAttribute('style')
    }
  };
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  /* future-weather{
    background:linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);

  }
   page{
    background:linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);
   } */

  .chart-container{
    height: 20rem;
  }
  .now{
    width: 300px;
    height: 400px;
    background-color: rgba(255, 255, 255, 60%);
    border-radius: 1.5rem;
    margin: 3% auto;
    box-shadow: 0 0 1rem 0.2rem rgb(0 0 0 / 10);
  }
 
  span.color_red{
    color: red;
  }
  i{
    font-size: 20px;
    color: red;
  }
  </style>
